import { useState, forwardRef, useRef, useMemo, useImperativeHandle, useEffect } from 'react'
import { Button, Table, Pagination } from 'antd'

const styles = {
  display: 'flex',
  flexDirection: 'row',
  justifyContent: 'flex-end',
  alignItems: 'center'
}

const MyTable = forwardRef(({ initValues, config, columns, buttons }, ref) => {
  const [dataSource, setDataSource] = useState([])
  const tableInstance = useRef(null)
  useImperativeHandle(ref, () => {
    return {
      nativeElement: tableInstance.current.nativeElement,
      scrollTo: tableInstance.current.scrollTo,
      setDataSource,
    }
  })

  const ButtonItems = useMemo(() => {
    return (buttons ?? []).map(attrs => {
      return (
        <Button
          size="small"
          {...attrs}
          key={attrs.key}
        >
          {attrs.text}
        </Button>
      )
    })
  }, [buttons])

  return (
    <>
      { ButtonItems }
      <div style={{ marginBottom: '10px' }} />
      <Table ref={tableInstance} pagination={false} columns={columns} dataSource={dataSource} />
      <div style={styles}>
        <Pagination />
      </div>
    </>
  )
})

export default MyTable
